<template>
  <card ref="card">
    <card-header
      big-font-size
      :edit-title="editTitle"
      show-icon
      :title="currentTitle"
      @handleEditTitle="editTitle = true"
      @handleInputBlur="headerInputBlur($event, 'editTitle', 'currentTitle')"
    >
      <el-button class="record" size="mini" @click="showRecordDialog">历史记录</el-button>
    </card-header>

    <!-- 使用说明 -->
    <div class="des">
      <el-input v-model="description" :autosize="{ minRows: 2 }" class="description" placeholder="添加使用说明..." type="textarea" />
    </div>

    <div class="form-collection">
      <card-header
        :edit-title="editFormTitle"
        :title="currentFormTitle"
        @handleEditTitle="editFormTitle = true"
        @handleInputBlur="headerInputBlur($event, 'editFormTitle', 'currentFormTitle')"
      >
        <el-tooltip content="添加表单" placement="top">
          <i class="el-icon-plus" style="cursor: pointer" @click="showFormDialog" />
        </el-tooltip>
      </card-header>

      <div class="form-collection-form">
        <div v-show="parameters.length === 0" class="empty">暂无内容</div>
        <div
          v-for="(option, index) in parameters"
          :key="index"
          class="draggable-item"
          :draggable="true"
          @dragenter="dragenter($event, index, 'parameters', 'formDragIndex')"
          @dragover="dragover($event, index)"
          @dragstart="dragstart(index, 'formDragIndex')"
        >
          <img alt="" class="var-icon" src="@/assets/images/variable.png" />
          <div class="var-name">{{ option.varName }}</div>
          <div>·</div>
          <div class="show-name">
            <el-input v-model="option.value" :placeholder="option.showName" />
          </div>
          <div class="is-required">{{ option.isRequired ? '必填' : '' }}</div>
          <!-- 排序 -->
          <el-tooltip content="拖动排序" placement="top">
            <div class="drag-icon">
              <img alt="" src="@/assets/images/sort.png" style="width: 14px" />
            </div>
          </el-tooltip>
          <!-- 移除 -->
          <el-tooltip content="移除" placement="top">
            <div class="drag-icon" @click="removeFormOption(index)"><i class="el-icon-remove-outline"></i></div>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div class="steps">
      <div
        v-for="(step, index) in steps"
        :id="step.id"
        :key="index"
        class="step"
        :draggable="true"
        @dragenter="dragenter($event, index, 'steps', 'stepDragIndex')"
        @dragover="dragover($event, index)"
        @dragstart="dragstart(index, 'stepDragIndex')"
      >
        <card-header
          :ref="step.id"
          :edit-title="step.editTitle"
          :show-edit="false"
          :title="step.name"
          @handleInputBlur="headerStepInputBlur($event, step)"
        >
          <div class="step-right">
            <!-- 编辑标题 icon -->
            <el-tooltip content="编辑标题" placement="top">
              <div v-show="!step.editTitle" class="header-title-icon" @click="handleStepEditTitle(step)">
                <i class="el-icon-edit-outline"></i>
              </div>
            </el-tooltip>
            <!-- 插入步骤 icon -->
            <el-tooltip content="插入步骤" placement="top">
              <div v-show="index !== steps.length - 1" class="header-title-icon" @click="interPlusStep(index)">
                <i class="el-icon-plus"></i>
              </div>
            </el-tooltip>
            <!-- 删除步骤 icon -->
            <el-tooltip content="删除此步" placement="top">
              <div class="header-title-icon" @click="handleSelectStep(index)">
                <i class="el-icon-delete"></i>
              </div>
            </el-tooltip>
            <!-- 排序 icon -->
            <el-tooltip content="拖动排序" placement="top">
              <div class="header-title-icon" @click="handleDeleteStep(step.id)">
                <img alt="" src="@/assets/images/sort.png" style="width: 14px" />
              </div>
            </el-tooltip>
            <!-- 配置步骤 icon -->
            <el-tooltip content="配置" placement="top">
              <div class="header-title-icon" @click="handleSelectStep(step)">
                <i class="el-icon-setting"></i>
              </div>
            </el-tooltip>
          </div>
        </card-header>

        <div class="step-content">
          <div class="step-content-header">
            <div class="step-subtitle">AI问答</div>
            <el-tooltip content="本步测试" placement="top">
              <div class="step-test" @click="showTestDialog()"><i class="el-icon-caret-right" /></div>
            </el-tooltip>
          </div>
          <div class="step-content-textarea">
            <el-input v-model="step.content" :autosize="{ minRows: 3, maxRows: 15 }" placeholder="请输入内容" type="textarea" />
          </div>
        </div>
      </div>
    </div>

    <div class="plus">
      <el-button icon="el-icon-plus" @click="plusNextStep">添加下一步</el-button>
    </div>

    <!-- <form-dialog ref="formPlusDialog" :form="form" title="编辑变量" @form-change="handleFormChange" @plus-option="handlePlusOption" />-->
    <!-- 表单收集弹窗 -->
    <form-dialog ref="formPlusDialog" title="编辑变量" @form-change="handleFormChange" />
    <!-- 历史记录弹窗 -->
    <record-dialog ref="recordDialog" />
    <!-- 测试弹窗 -->
    <test-dialog ref="testDialog" />
  </card>
</template>

<script>
  import Card from './Card.vue'
  import { numberToChinese } from '@/utils'
  import CardHeader from './CardHeader.vue'
  import FormDialog from '@/components/FormDialog.vue'
  import RecordDialog from '@/components/RecordDialog.vue'
  import TestDialog from '@/components/TestDialog.vue'
  import BeforeNewChat from '@/views/userClient/components/BeforeNewChat.vue'

  export default {
    name: 'PromptWordsCard',
    // eslint-disable-next-line vue/no-unused-components
    components: { BeforeNewChat, TestDialog, RecordDialog, FormDialog, CardHeader, Card },
    data() {
      return {
        currentTitle: '产业园区',
        editTitle: false,
        description: '',

        currentFormTitle: '表单收集',
        editFormTitle: false,
        parameters: [
          { type: 'text', varName: '表单1', showName: '建设单位全称？', isRequired: true, model: '', content: '', value: '' },
          { type: 'text', varName: '表单2', showName: '本项目名称？', isRequired: true, model: '', content: '', value: '' },
          { type: 'text', varName: '所属行业', showName: '本项目所属行业？', isRequired: false, model: '', content: '', value: '' },
        ],
        formDragIndex: null,

        steps: [],
        stepDragIndex: null,
        selectedStep: {},

        template: {
          id: '',
          name: '',
          business_code: null,
          business_name: '',
          description: '',
          parameters: [],
          is_enabled: false,
        },
      }
    },
    methods: {
      // 拖动排序
      dragstart(index, dragIndex) {
        this[dragIndex] = index
      },
      dragenter(e, index, list, dragIndex) {
        e.preventDefault()
        // 避免源对象触发自身的dragenter事件
        if (this[dragIndex] !== index) {
          const source = this[list][this[dragIndex]]
          this[list].splice(this[dragIndex], 1)
          this[list].splice(index, 0, source)
          // 排序变化后目标对象的索引变成源对象的索引
          this[dragIndex] = index
        }
        console.log(this[list])
      },
      dragover(e, index) {
        e.preventDefault()
      },
      goAnchor(id) {
        const anchor = document.getElementById(id)
        anchor.scrollIntoView()
      },

      handleFormChange(form) {
        console.log('form', form)
      },
      // handlePlusOption() {
      //   this.form.options.push({ option: '' })
      // },
      headerInputBlur(title, editField, titleField) {
        this[editField] = false
        this[titleField] = title
      },
      handleStepEditTitle(step) {
        step.editTitle = true
        this.$nextTick(() => {
          this.$refs[step.id][0].$refs.input.focus()
        })
      },
      headerStepInputBlur(title, step) {
        step.editTitle = false
        step.name = title
        this.handleUpdateStepName(title)
      },
      numberToChinese,
      showFormDialog() {
        this.$refs.formPlusDialog.showDialog()
      },
      showRecordDialog() {
        this.$refs.recordDialog.showDialog()
      },
      showTestDialog() {
        this.$refs.testDialog.showDialog()
      },
      removeFormOption(index) {
        this.parameters.splice(index, 1)
      },
      // 添加步骤
      plusNextStep() {
        this.steps.push({
          id: `${new Date().getTime()}`,
          // name: numberToChinese(this.steps.length + 1),
          name: '标题',
          order: this.steps.length + 1,
          dependent: '',
          content: '',
          function: {
            code: null,
            name: '',
            params: '',
            doc_tags: '',
            variable: '',
          },
          editTitle: false,
        })
        this.$nextTick(() => {
          this.$refs.card.scrollIntoView()
        })
      },
      // 插入步骤
      interPlusStep(index) {
        this.steps.splice(index + 1, 0, {
          id: `${new Date().getTime()}`,
          // name: numberToChinese(this.steps.length + 1),
          name: '标题',
          order: this.steps.length,
          dependent: '',
          content: '',
          function: {
            code: null,
            name: '',
            params: '',
            doc_tags: '',
            variable: '',
          },
          editTitle: false,
        })
      },
      // 删除步骤
      handleDeleteStep(id) {},
      // 选择步骤
      handleSelectStep(step) {
        this.selectedStep = step
        this.$emit('selectStep', step)
      },
      // 选择步骤名称
      handleUpdateStepName(name) {
        this.$emit('update-step-name', name)
      },
      generateTemplate() {
        return {
          id: '',
          name: this.currentTitle,
          business_code: null,
          business_name: '',
          description: this.description,
          parameters: this.parameters,
          is_enabled: false,
          steps: this.steps,
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  ::v-deep .record.el-button--mini {
    padding: 3px 5px;
  }
  .des {
    padding: 0 0 5px;
    margin: 0 0 15px;
    border-bottom: 1px solid #f5f5f5;

    ::v-deep .description {
      .el-textarea__inner {
        border: none;
      }
    }
  }

  .form-collection {
    .form-collection-form {
      .empty {
        text-align: center;
        padding: 20px;
        color: #999999;
      }
      .draggable-item {
        padding: 5px;
        margin: 0 0 5px;
        display: flex;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        align-items: center;

        div {
          flex-shrink: 0;
        }

        .var-icon {
          width: 14px;
          height: 14px;
          vertical-align: baseline;
          margin-right: 5px;
        }

        .var-name {
          flex: 1;
          font-size: 15px;
          font-weight: 600;
        }

        .show-name {
          flex: 3;
          font-size: 14px;
          color: #999999;

          ::v-deep .el-input__inner {
            height: 25px;
            line-height: 25px;
            border: none;
            padding: 0 0 0 5px;
          }
        }

        .is-required {
          width: 30px;
          font-size: 12px;
          color: #666666;
          text-align: center;
          flex-wrap: nowrap;
        }

        .drag-icon {
          width: 20px;
          text-align: center;
          cursor: pointer;
        }

        i {
          color: #666666;
        }
      }
    }
  }

  .steps {
    .step {
      margin: 20px 0 0;
    }

    .step-header {
      margin: 0 0 10px;
    }

    .step-right {
      display: flex;
      align-items: center;

      .header-title-icon {
        width: 14px;
        height: 14px;
        margin-left: 5px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          vertical-align: baseline;
        }
      }
    }

    .step-content {
      padding: 15px;
      background: #f5f5f5;
      border-radius: 8px;

      .step-content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 5px;
        .step-subtitle {
          font-weight: 600;
        }
        .step-test {
          height: 16px;
          width: 16px;
          border-radius: 50%;
          border: 1px solid #999999;
          text-align: center;
          cursor: pointer;
          i.el-icon-caret-right {
            line-height: 16px;
            font-size: 14px;
          }
        }
      }

      .step-content-textarea {
        ::v-deep .el-textarea__inner {
          padding: 0;
          font-size: 14px;
          background: transparent;
          border: none;
        }
      }
    }
  }

  .plus {
    margin: 15px 0 0;
    .el-button {
      width: 100%;
      height: 40px;
      background: #f5f5f5;
      border: none;
    }
  }
</style>
